import React from "react"
import { NavBar, Icon,Popover } from 'antd-mobile';
import queryString from "query-string"
import {get_song_details,get_music_url,to_like_song} from "../../../api/index"
import Item from "antd-mobile/lib/popover/Item";

import myStyle from "../style/My.module.css"

// const Item = Popover.Item;
const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;

class PlayMusic extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      musicUrl:"",
      fengmian:"",
      songName:"",
      songId:"",
      playerName:"",
      zhuanji:"",
      playerId:"",
      flag:false,
      like:0,
      // like:Number(localStorage.getItem("ifLike"))

      visible: true,
      selected: '',

    }
  }

  componentDidMount(){
    console.log(this.state.like)
    // console.log(this.props)
    let qr = queryString.parse(this.props.location.search)
    console.log(qr)
    get_music_url(qr.id)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          musicUrl:res.data[0].url
      })
      console.log(this.state.musicUrl);
    })

    get_song_details(qr.id)
      .then(body=>body.json())
      .then(res=>{
        console.log(res);
          this.setState({
            songName:res.songs[0].name,
            songId:res.songs[0].id,
            playerName:res.songs[0].ar[0].name,
            playerId:res.songs[0].ar[0].id,
            fengmian:res.songs[0].al.picUrl,
            zhuanji:res.songs[0].al.name
        })
        console.log(this.state.fengmian);
      })
    
  }

  goPlayer(id){
    // console.log(id)
    this.props.history.push("/my/player?id="+id)
  }

  goback(props){
    this.props.history.goBack()
    // console.log(222)
  }

  pause(){
    // console.log(555)
    this.setState({
      flag:false
    })
  }
  play(){
    // console.log(666)
    this.setState({
      flag:true
    })
  }

  goPinglun(id){
    console.log(id)
    this.props.history.push("/playmusic_pinglun?id="+id)
  }

  toLike(){
    let qr = queryString.parse(this.props.location.search)
    // console.log(qr)
    let ifLike = this.state.like?0:1
    // localStorage.setItem("ifLike",qr.id+"/"+ifLike)
    // localStorage.setItem("ifLike",ifLike)
    to_like_song(qr.id,Boolean(ifLike))
    .then(body=>body.json())
    .then(res=>{
      console.log(ifLike);
        this.setState({
          like:!this.state.like
      })
      // console.log(this.state.like);
      if(this.state.like){
        alert("已喜欢该歌曲")
      }else{
        alert("消除喜欢成功")
      }
    })

  }

  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };
  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render(){
    // console.log(this.props)
    return (
      <div className={myStyle.playmusic}>
        <div className={myStyle.playmusic_Navbar}>
            <NavBar
              style={{backGround:'white'}}
              mode="dark"
              icon={<Icon type="left" onClick={this.goback.bind(this)} style={{width:"30px",height:"30px",zIndex:2}}/>}

        
              rightContent={[
              <Icon key="1" style={{
                width: '22px',
                height: '22px',
                background: 'url('+require("../../../static/icon/nav_play.png")+') center center /  21px 21px no-repeat'
              }}/>,
              ]}
            >
              <h3><i>CloudMusic</i></h3>
            </NavBar>
          </div>
          
          <div className={myStyle.playmusic_tabs} 
          style={{display:"flex",flexDirection:"column",alignItems:"center",
            paddingTop:"10px",}}>

            <h2>{this.state.songName}</h2>
            <h3>{this.state.playerName}</h3>

            <img src={this.state.fengmian} alt=""
            style={{width:"200px",height:"200px",
            borderRadius:"50%",
            border:"40px solid black",
            
            }}
            className={this.state.flag?myStyle.an:myStyle.no_an}/>

            <div className={myStyle.playmusic_control}>
              {/* {this.state.like} */}
              <svg 
                // className={this.state.like?myStyle.i_noLike:myStyle.i_Like}
                // style={{display:this.state.like?"none":"inline"}}
                onClick={this.toLike.bind(this)}
                style={{coloe:'red'}}
               t="1574089053182" className="icon" viewBox="0 0 1169 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1911" width="35" height="25"><path d={this.state.like?"M1167.909813 104.579568L1164.354316 101.024071c-132.548946-130.557868-343.887717-135.108904-481.983239-10.524273C544.275555-34.084834 332.936784-29.391577 200.387838 101.024071c-135.251124 133.544485-136.815543 351.425371-3.271058 486.818715l3.271058 3.271058 403.762294 400.064577c42.38153 43.234849 111.784841 43.803729 155.01969 1.422199l1.422199-1.422199 403.762295-399.780137c135.393344-133.402266 137.099983-351.425371 3.555497-486.818716z m-132.122286 284.297579c-9.955393 0-18.204147-8.106534-18.204148-18.204147 0-65.563374-53.190242-118.753616-118.753615-118.753616-4.835477 0-9.528733-1.991079-12.942011-5.404356-3.413278-3.413278-5.404356-8.106534-5.404356-12.942011 0-10.097613 8.106534-18.204147 18.204147-18.204147 85.758599 0 155.30413 69.545531 155.30413 155.30413 0 9.955393-8.106534 18.204147-18.204147 18.204147z":"M1066.667 102.4C930.133-25.6 725.333-34.133 588.8 93.867 443.733-34.133 238.933-25.6 102.4 102.4c-136.533 136.533-136.533 349.867 0 486.4l401.067 401.067c42.666 42.666 110.933 42.666 153.6 0L1058.133 588.8c145.067-128 145.067-349.867 8.534-486.4z m-51.2 435.2L614.4 938.667c-17.067 17.066-34.133 17.066-51.2 0L153.6 537.6c-110.933-102.4-110.933-281.6 0-384 102.4-102.4 273.067-102.4 384-8.533l51.2 42.666 51.2-42.666c110.933-102.4 273.067-93.867 384 8.533 93.867 110.933 93.867 281.6-8.533 384z"} fill="#000000" p-id="1912"></path>
              </svg>
              {/* <svg 
                // className={this.state.like?myStyle.i_noLike:myStyle.i_Like}
                // style={{display:this.state.like?"none":"inline"}}
                onClick={this.toLike.bind(this)}
               t="1574089053182" className="icon" viewBox="0 0 1169 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1911" width="35" height="25"><path d="M1167.909813 104.579568L1164.354316 101.024071c-132.548946-130.557868-343.887717-135.108904-481.983239-10.524273C544.275555-34.084834 332.936784-29.391577 200.387838 101.024071c-135.251124 133.544485-136.815543 351.425371-3.271058 486.818715l3.271058 3.271058 403.762294 400.064577c42.38153 43.234849 111.784841 43.803729 155.01969 1.422199l1.422199-1.422199 403.762295-399.780137c135.393344-133.402266 137.099983-351.425371 3.555497-486.818716z m-132.122286 284.297579c-9.955393 0-18.204147-8.106534-18.204148-18.204147 0-65.563374-53.190242-118.753616-118.753615-118.753616-4.835477 0-9.528733-1.991079-12.942011-5.404356-3.413278-3.413278-5.404356-8.106534-5.404356-12.942011 0-10.097613 8.106534-18.204147 18.204147-18.204147 85.758599 0 155.30413 69.545531 155.30413 155.30413 0 9.955393-8.106534 18.204147-18.204147 18.204147z" fill="#000000" p-id="1912"></path>
              </svg> */}
              {/* <svg 
                // className={this.state.like?myStyle.i_Like:myStyle.i_noLike}
                style={{display:this.state.like?"inline":"none"}}
                onClick={this.toLike.bind(this)}
              t="1574214134746" className="icon" viewBox="0 0 1629 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2486" width="30" height="30"><path d="M1167.909813 104.579568L1164.354316 101.024071c-132.548946-130.557868-343.887717-135.108904-481.983239-10.524273C544.275555-34.084834 332.936784-29.391577 200.387838 101.024071c-135.251124 133.544485-136.815543 351.425371-3.271058 486.818715l3.271058 3.271058 403.762294 400.064577c42.38153 43.234849 111.784841 43.803729 155.01969 1.422199l1.422199-1.422199 403.762295-399.780137c135.393344-133.402266 137.099983-351.425371 3.555497-486.818716z m-132.122286 284.297579c-9.955393 0-18.204147-8.106534-18.204148-18.204147 0-65.563374-53.190242-118.753616-118.753615-118.753616-4.835477 0-9.528733-1.991079-12.942011-5.404356-3.413278-3.413278-5.404356-8.106534-5.404356-12.942011 0-10.097613 8.106534-18.204147 18.204147-18.204147 85.758599 0 155.30413 69.545531 155.30413 155.30413 0 9.955393-8.106534 18.204147-18.204147 18.204147z" fill="#d81e06" p-id="2487"></path></svg> */}
              <svg t="1574090037249" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3864" width="35" height="25"><path d="M503.25376 970.19008a458.112 458.112 0 0 1-323.93344-134.38464 458.07232 458.07232 0 0 1-133.9648-324.10624A458.09536 458.09536 0 0 1 503.25504 53.33888a458.09664 458.09664 0 0 1 457.9008 458.36032 458.07232 458.07232 0 0 1-133.9648 324.10624 458.1184 458.1184 0 0 1-323.93728 134.38464z m0-874.71104a415.93984 415.93984 0 0 0-294.06848 121.96992 415.968 415.968 0 0 0-121.6896 294.18496c0 229.9008 186.11968 416.21504 415.75936 416.21504a415.94368 415.94368 0 0 0 294.07104-121.96992 415.936 415.936 0 0 0 121.6896-294.18112C919.0144 281.7984 732.89472 95.47904 503.25376 95.47904z m0 0" p-id="3865" fill="#000000"></path><path d="M525.60512 743.43552c-23.7248 23.79008-32.96512 9.43488-42.33984 0l-183.5648-183.76448c-31.38944-31.45472 5.9648-58.1312 31.00032-33.0944l152.56448 160.29952V291.04c0-45.08928 42.33984-40.89472 42.33984 0v395.83616L678.1696 526.57536c24.38016-24.38016 68.29056-4.25984 31.00032 33.0944L525.6704 743.43552h-0.06528z m0 0" p-id="3866" fill="#000000"></path></svg>
              <svg 
                t="1574090103921" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6610" width="35" height="25"><path d="M784.576512 442.86976c-77.860864 0-275.355648 8.390656-342.020096-17.866752-73.125888-28.807168-110.196736-92.162048-110.196736-166.2464 0-66.912256 33.619968-130.689024 95.143936-181.731328-226.711552 43.008-396.130304 195.710976-396.130304 400.982016 0 123.91424 47.886336 208.089088 119.851008 280.64768H22.355968s86.808576 151.71584 497.072128 151.71584h230.961152c244.353024 0 254.103552-32.524288 254.103552-203.956224 0-132.222976-37.2736-263.544832-219.916288-263.544832z m-48.648192 305.88928h-54.943744c-19.310592 0-27.138048-14.372864-17.483776-30.691328l27.467776-47.005696c9.65632-16.318464 25.307136-16.607232 34.961408-0.28672l27.475968 47.437824c9.65632 16.318464 1.83296 30.54592-17.477632 30.54592z" p-id="6611" fill="#000000"></path><path d="M642.516992 372.498432h35.129344v78.592h-35.129344v-78.592zM889.933824 197.218304c-21.858304-41.96352-65.73056-70.633472-116.320256-70.633472-48.508928 0-90.85952 26.34752-113.53088 65.511424-22.673408-39.163904-65.024-65.511424-113.532928-65.511424-50.589696 0-94.461952 28.669952-116.320256 70.633472a17.465344 17.465344 0 0 0-2.779136 9.457664 17.563648 17.563648 0 0 0 17.563648 17.563648 17.55136 17.55136 0 0 0 15.603712-9.5232l0.098304 0.049152c15.755264-31.449088 48.26112-53.051392 85.83168-53.051392 53.000192 0 95.967232 42.964992 95.967232 95.967232v78.592h35.129344v-78.592c0-53.000192 42.964992-95.967232 95.967232-95.967232 37.57056 0 70.076416 21.602304 85.83168 53.051392l0.098304-0.049152a17.553408 17.553408 0 0 0 15.603712 9.5232 17.563648 17.563648 0 0 0 17.563648-17.563648 17.416192 17.416192 0 0 0-2.77504-9.457664z" p-id="6612" fill="#000000"></path>
              </svg>
              <svg 
                onClick={this.goPinglun.bind(this,this.state.songId)}
                t="1574090135031" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8016" width="35" height="25"><path d="M512 80c27.3 0 55 2.6 82.1 7.9 32 6.1 63.2 15.9 93 29.1 29.4 13 57.4 29.3 83.2 48.4 25.8 19.2 49.5 41.3 70.4 65.6 21.2 24.7 39.5 51.8 54.6 80.6l0.1 0.1 0.1 0.1c25.8 48.8 41.4 101.5 46.6 156.4v0.2c1.8 18.7 2.3 37.7 1.4 56.5v1.1c-1.7 30.8-7 63.3-16.4 99.4-12.9 50-32.3 99.9-57.4 148.2l-9.3 17.8 0.2 20c0.2 18.8 0.4 41 0.4 62.7v64c-22.2 0.4-44.5 0.9-66.3 1.3l-17.6 0.3-4.8 0.1c-48.5 1-98.6 2-147.9 2.8-35.7 0.5-73.9 1.1-111.3 1.3h-1.3c-27 0-54.2-2.5-80.8-7.4-57.3-11-110.7-32.9-158.7-65.1-46.4-31.1-85.9-70.4-117.4-116.9s-53.4-97.8-65-152.4c-12.1-56.5-12.6-114.2-1.6-171.6 9.7-50.6 28-98.4 54.4-142 25.5-42.2 57.9-79.4 96.2-110.8 38.1-31.1 80.8-55.4 127-72.1C412.8 88.6 462 80 512 80m-0.1-80C271.3 0 56.7 170.4 9.6 415.5-43.9 693.3 138 961.7 415.8 1015.1h0.2c31.6 5.9 63.6 8.8 95.7 8.8h1c38-0.2 76.7-0.8 112.9-1.3 51-0.9 102.9-1.9 153-2.9 35.8-0.7 72.8-1.4 109.2-2.1h0.8c6.4-0.3 12.6-1.6 18.6-3.9l1.3-0.6c19.7-8.7 32.4-28.1 32.4-49.6v-0.2c-0.1-19.7-0.1-39.9 0-59.3v-29.9c0-21-0.2-42-0.5-63.5 28-53.7 49.5-109.2 63.9-165.1 10.9-41.9 17-80.1 18.9-116.7v-0.1c1-22.6 0.5-45.3-1.7-67.8-6.1-65.2-24.9-128.5-55.5-186.4C893.7 136.4 762.3 38.8 609.2 9.3 576.5 3 544 0 511.9 0z" p-id="8017" fill="#000000"></path><path d="M372.5 518.4c-2.1 25.6-16.2 48.7-38.1 62.1-10.1 6.1-21.4 9.9-33.2 11.2-2.7 0.2-5.4 0.4-8.1 0.4-11.3 0-22.5-2.4-32.8-7-8.8-4-16.7-9.5-23.6-16.3-31.1-31.1-31.1-81.6 0.1-112.7s81.6-31.1 112.7 0.1c16.3 16.2 24.8 39 23 62.2zM591.9 518.8c-3 38.4-33 69.2-71.3 73.2-2.7 0.3-5.4 0.4-8.1 0.4-12 0-23.7-2.7-34.5-7.9-39.7-19.1-56.3-66.8-37.2-106.4 7.8-16.3 21-29.4 37.2-37.2 38.3-18.4 84.3-3.5 104.6 33.9 3.8 6.9 6.5 14.3 8 22 1.4 7.2 1.9 14.6 1.3 22zM812 518.8c-3 38.4-33 69.2-71.3 73.2-2.7 0.3-5.4 0.4-8.1 0.4-12-0.1-23.8-2.7-34.6-7.9-39.7-19.1-56.4-66.7-37.3-106.4s66.7-56.4 106.4-37.3c29.5 14.3 47.4 45.2 44.9 78z" p-id="8018" fill="#000000"></path>
              </svg>
              {/* <svg t="1574090228427" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11437" width="35" height="25"><path d="M510.577778 952.888889c-234.666667 0-426.666667-192-426.666667-426.666667s192-426.666667 426.666667-426.666666 426.666667 192 426.666666 426.666666-192 426.666667-426.666666 426.666667z m0-796.444445c-203.377778 0-369.777778 166.4-369.777778 369.777778s166.4 369.777778 369.777778 369.777778 369.777778-166.4 369.777778-369.777778-166.4-369.777778-369.777778-369.777778z" p-id="11438" fill="#000000"></path><path d="M674.133333 426.666667h-327.111111c-15.644444 0-28.444444-12.8-28.444444-28.444445s12.8-28.444444 28.444444-28.444444h327.111111c15.644444 0 28.444444 12.8 28.444445 28.444444s-12.8 28.444444-28.444445 28.444445zM674.133333 711.111111h-327.111111c-15.644444 0-28.444444-12.8-28.444444-28.444444s12.8-28.444444 28.444444-28.444445h327.111111c15.644444 0 28.444444 12.8 28.444445 28.444445s-12.8 28.444444-28.444445 28.444444zM702.577778 568.888889h-384c-15.644444 0-28.444444-12.8-28.444445-28.444445s12.8-28.444444 28.444445-28.444444h384c15.644444 0 28.444444 12.8 28.444444 28.444444s-12.8 28.444444-28.444444 28.444445z" p-id="11439" fill="#000000"></path></svg> */}
              <Popover mask
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            // visible={this.state.visible}
            visible={false}

            overlay={[
            (<Item
              key="4" value="scan" icon={<svg t="1574237268626" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686" width="20" height="20"><path d="M512 171.355c-100.16 0-181.645 81.485-181.645 181.645 0 100.16 81.485 181.645 181.645 181.645 100.16 0 181.645-81.485 181.645-181.645 0-100.16-81.485-181.645-181.645-181.645M512 594c-64.374 0-124.894-25.069-170.412-70.588C296.068 477.893 271 417.374 271 353c0-64.374 25.069-124.894 70.588-170.413C387.106 137.069 447.626 112 512 112c64.374 0 124.894 25.069 170.412 70.587C727.932 228.106 753 288.627 753 353c0 64.374-25.069 124.893-70.588 170.412C636.894 568.932 576.374 594 512 594" p-id="3687"></path><path d="M833.865 912c-16.643 0-30.135-13.276-30.135-29.651 0-76.673-30.345-148.757-85.445-202.973-55.101-54.217-128.361-84.075-206.286-84.075-77.924 0-151.184 29.858-206.284 84.075-55.101 54.216-85.446 126.3-85.446 202.973 0 16.375-13.493 29.651-30.135 29.651C173.49 912 160 898.724 160 882.349c0-46.744 9.31-92.105 27.674-134.823 17.73-41.247 43.106-78.285 75.424-110.083 32.318-31.799 69.958-56.768 111.878-74.213C418.392 545.162 464.493 536 511.999 536c47.507 0 93.608 9.162 137.024 27.23 41.92 17.445 79.561 42.414 111.878 74.213 32.318 31.798 57.693 68.836 75.424 110.083C854.688 790.244 864 835.606 864 882.349 864 898.724 850.508 912 833.865 912" p-id="3688"></path></svg>
              } data-seed="logId"><h3 onClick={this.goPlayer.bind(this,this.state.playerId)}>{"歌手："+this.state.playerName}</h3>
            </Item>),
            (<Item key="5" value="special" icon={<svg t="1574237348344" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4433" width="20" height="20"><path d="M802.816 201.728C724.992 124.928 622.592 81.92 513.024 81.92s-211.968 43.008-289.792 119.808c-159.744 159.744-159.744 418.816 0 578.56C300.032 858.112 403.456 901.12 513.024 901.12s211.968-43.008 289.792-119.808c159.744-159.744 159.744-419.84 0-579.584z m-52.224 527.36c-63.488 63.488-147.456 98.304-237.568 98.304-90.112 0-174.08-34.816-237.568-98.304-131.072-131.072-131.072-344.064 0-475.136 63.488-63.488 147.456-98.304 237.568-98.304 90.112 0 174.08 34.816 237.568 98.304 131.072 131.072 131.072 344.064 0 475.136z" p-id="4434"></path><path d="M513.024 351.232c-37.888 0-72.704 14.336-99.328 40.96-54.272 54.272-54.272 143.36 0 197.632 26.624 26.624 61.44 40.96 99.328 40.96 37.888 0 72.704-14.336 99.328-40.96 26.624-26.624 40.96-61.44 40.96-99.328 0-37.888-14.336-72.704-40.96-99.328-26.624-25.6-62.464-39.936-99.328-39.936z m47.104 187.392c-12.288 12.288-29.696 19.456-47.104 19.456-17.408 0-34.816-7.168-47.104-19.456-25.6-25.6-25.6-68.608 0-94.208 12.288-12.288 29.696-19.456 47.104-19.456 17.408 0 34.816 7.168 47.104 19.456 25.6 25.6 25.6 68.608 0 94.208zM621.568 361.472c7.168 0 14.336-3.072 19.456-9.216l70.656-90.112c8.192-10.24 6.144-25.6-4.096-34.816-10.24-8.192-25.6-6.144-34.816 4.096l-70.656 90.112c-8.192 10.24-6.144 25.6 4.096 34.816 4.096 3.072 10.24 5.12 15.36 5.12zM778.24 297.984c-8.192-10.24-23.552-12.288-34.816-4.096l-90.112 70.656c-10.24 8.192-12.288 23.552-4.096 34.816 5.12 6.144 12.288 9.216 19.456 9.216 5.12 0 10.24-2.048 15.36-5.12l90.112-70.656c10.24-9.216 12.288-24.576 4.096-34.816zM385.024 631.808l-70.656 90.112c-8.192 10.24-6.144 25.6 4.096 34.816 4.096 3.072 10.24 5.12 15.36 5.12 7.168 0 14.336-3.072 19.456-9.216l70.656-90.112c8.192-10.24 6.144-25.6-4.096-34.816-11.264-9.216-26.624-7.168-34.816 4.096zM376.832 584.704c-8.192-10.24-23.552-12.288-34.816-4.096l-90.112 70.656c-10.24 8.192-12.288 23.552-4.096 34.816 5.12 6.144 12.288 9.216 19.456 9.216 5.12 0 10.24-2.048 15.36-5.12l90.112-70.656c10.24-8.192 12.288-24.576 4.096-34.816z" p-id="4435"></path></svg>}
             style={{ whiteSpace: 'nowrap' }}>{"专辑："+this.state.zhuanji}
            </Item>),
            (<Item key="6" value="button ct" icon={myImg('uQIYTFeRrjPELImDRrPt')}>
                <span style={{ marginRight: 5 }}>Help</span>
            </Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              width:'60px',
              height: '60px',
              padding: '0 0px',
              marginRight: '0',
              display: 'inline',
              // alignItems: 'center',
            }}
            >
              <Icon type="ellipsis" />
            </div>
          </Popover>
            
            </div>

            <audio 
            onPlay={this.play.bind(this)}
            onPause={this.pause.bind(this)}
            src={this.state.musicUrl} 
            controls="controls" 
            autoPlay="autoplay"
            style={{display:"block",margin:"0px auto",
            border:"1px solid black",borderRadius:"30px",
            }}
            >
            </audio>

            

            {/* //小弹窗 */}
            <div>



    </div>



          </div>
      </div>
    )
  }
}

export default PlayMusic


